<template>
 <div>
 <Title :title="title"></Title>
 <div style="height: 150px;" ref="box5"></div>
 </div>
</template>
<script setup>
import Title from './Title.vue';
//引入moment
import moment from 'moment';
//引入get请求
import { get } from '@/utils/request.js';
import { onMounted, ref } from 'vue';
import { Area } from '@antv/g2plot';
const title = ref('分贝');
const box5 = ref(null);//{value:null}
const noiData = ref([]);
const loadArea = () => {
    const area = new Area(box5.value, {
        data: noiData.value,
        xField: 'time',
        yField: 'noise',
        xAxis: {
            range: [0, 1],
            tickCount: 5,
        },
        areaStyle: () => {
            return {
                fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
            };
        },
    });
    area.render();
}
//声明获取当天数据函数
const getNoiData = async () => {
    let response = await get('/dashboard/pageQueryTodayData', {
        page: 1,
        pageSize: 60,
    });
    console.log(response, '获取响应');
    response.data.list.forEach((item, index, arr) => {
        //第一条数据更改值
        arr[0].noise = 30;
        item.time = moment(item.insert_time).format('HH:mm');
    });
    //由于数据采集可能一样 每隔10条或者8条取一条
    let temp = [];
    for (var i = 0; i < response.data.list.length; i++) {
        //下标除8取余等于0
        if (i % 8 == 0) {
            //将符合条件数据添加到temp
            temp.push(response.data.list[i]);
        }
    }
    noiData.value = temp;
}
//生命周期 可以获取dom 节点 标签 ref=box
onMounted(async () => {
    //调用获取数据函数 先获取数据再给图表使用
    await getNoiData();
    loadArea();
})
</script>
 
<style scoped lang="less"></style>